import React, { useState } from "react";
import { Row, Col } from 'antd';
import './index.less'
// card信息放在一个组件里边 panelGroup
import PanelGroup from './components/panelGroup';
// line
import LineChart from './components/LineChart'
// radar
import RadarChart from './components/RadarChart';
// pie
import PieChart from './components/PieChart';
// bar
import BarChart from './components/BarChart';

// 申明linechart 数据
const lineChartData = {
    user: {
        expectData: [100, 200, 201, 103, 104, 204, 107],
        actualData: [200, 201, 100, 103, 204, 104, 163],
    },
    message: {
        expectData: [200, 201, 100, 103, 204, 204, 107],
        actualData: [200, 101, 200, 103, 304, 104, 163],
    },
    pay: {
        expectData: [100, 140, 231, 103, 144, 204, 107],
        actualData: [200, 201, 130, 123, 144, 104, 163],
    },
    shopping: {
        expectData: [100, 230, 211, 123, 104, 204, 147],
        actualData: [230, 101, 160, 153, 224, 144, 123],
    },
}
// 雷达图数据
const radarData = {
    clean: [5000, 18000, 8000, 6000, 19990, 14000],
    guolv: [5400, 17000, 8000, 16000, 10000, 14000],
    fresh: [15000, 7000, 18000, 6000, 19000, 14000]
}
// 饼图数据
const PieData = [
    { value: 320, name: '净化器' },
    { value: 620, name: '过滤器' },
    { value: 420, name: '空气清新机' },
]
// 柱状图图数据
const barData = {
    clean: [79, 52, 200, 334, 390, 330, 220],
    guolv: [80, 52, 200, 334, 390, 330, 220],
    fresh: [30, 52, 200, 334, 390, 330, 220]
}
const Dashboard = () => {
    // 将整体布局搭建
    // 一个card组件来实现 顶部 四个card展示
    // 四个图表组件 曲线图 雷达图 饼图 柱状图
    // 组件设计 我们需要用到哪些组件
    // 定义折线图数据的 useState
    const [lineData, setLineData] = useState(lineChartData['user'])
    const changeLine = key => {
        console.log(key, lineChartData[key])
        setLineData(lineChartData[key])
    }
    return (
        <div className="app-container">
            {/* card信息 */}
            <PanelGroup changeLine={changeLine} />
            <LineChart
                className='chart-wrapper'
                chartData={lineData}
                styles={{
                    padding: 12,
                    backgroundColor: "#fff",
                    marginBottom: "25px",
                }}
            />
            <Row gutter={24}>
                <Col xs={24} sm={24} lg={8}>
                    <RadarChart className='chart-wrapper' chartData={radarData} />
                </Col>
                <Col xs={24} sm={24} lg={8}>
                    <PieChart className='chart-wrapper' chartData={PieData} />
                </Col>
                <Col xs={24} sm={24} lg={8}>
                    <BarChart className='chart-wrapper' chartData={barData} />
                </Col>
            </Row>

        </div>
    );
};

export default Dashboard;
